<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html{-webkit-font-smoothing: antialiased;}

        a {
            color: white;
            text-decoration: none;
        }
        .controls{
            position: absolute;
            top: 0px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.16);
            height: 100%;
            width: 380px;
            padding: 23px;
            transform: translate3d(-250px, 0px, 0px);
            opacity: 0;
            box-sizing: border-box;
            transition: all 0.25s ease;
        }
        .controls ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .controls ul li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
            color: white;
        }

        .controls ul li a {
            display: block;
            padding: 10px 0px;
        }

        .counter {
            color: rgba(255, 255, 255, 0.12);
            position: absolute;
            width: calc(100% - 46px);
            bottom: 21px;
            text-align: justify;
            font-size: 0px;
        }

    </style>
</head>
<body>
<div class="controls">
    <ul>
        <li><a href="#" class="noiseTest">Noise</a>
        </li>
        <li><a href="javascript:history.go(0)">Refresh</a>
        </li>
        <li>
            <span class="title">Audio</span>
            <audio loop="" controls="" autoplay="" id="player">
                <source src="http://louie.co.nz/25th_hour/audio/Singing_Bowls_Throat.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </li>
    </ul>

    <div class="counter"></div>
</div>
</body>
</html>